<template>
  <div class="hello">
    <el-container>
      <el-aside width="200px">

          <img src="@/assets/logo.png" alt="">

          <!-- 菜单开始 -->
        <el-menu >
            <!-- 次级菜单 -->
            <el-menu-item  @click="yibiaopan">
              
            <template #title>
                <el-icon><Odometer /></el-icon> 仪表盘 
            </template>
             
            </el-menu-item>
            
            <el-sub-menu index="1">
            <template #title>
                <el-icon><Menu /></el-icon>常用设置
            </template>
            <!-- 次级菜单项 -->
            <el-menu-item-group>
                <el-menu-item index="1-1" @click="Tcguanli">  教师管理  </el-menu-item>
                <el-menu-item index="1-2" @click="STguanli">  学生管理  </el-menu-item>
                <el-menu-item index="1-3" @click="GGguanli">  公告管理  </el-menu-item>
                <el-menu-item index="1-4" @click="XTpeizhi">  系统配置  </el-menu-item>
                <el-menu-item index="1-5" @click="PTfuwu">  判题服务器  </el-menu-item>
            </el-menu-item-group>
        </el-sub-menu>

        <el-sub-menu index="2">
            <template #title>
                <el-icon><Aim /></el-icon>问题
            </template>
            <!-- 次级菜单项 -->
            <el-menu-item-group>
                <el-menu-item index="2-1" @click="WTliebiao">问题列表</el-menu-item>
                <el-menu-item index="2-2" @click="Addwenti">增加题目</el-menu-item>
                <el-menu-item index="2-3" @click="DaoRuchu">导入导出题目</el-menu-item>
            </el-menu-item-group>
        </el-sub-menu>

        <el-sub-menu index="3">
            <template #title>
                <el-icon><Trophy /></el-icon>比赛&练习
            </template>
            <!-- 次级菜单项 -->
            <el-menu-item-group>
                <el-menu-item index="3-1" @click="BSliebiao">比赛列表</el-menu-item>
                <el-menu-item index="3-2" @click="CJbisai">创建比赛</el-menu-item>
            </el-menu-item-group>
        </el-sub-menu>

        <el-sub-menu index="4">
            <template #title>
                <el-icon><Collection /></el-icon>课程
            </template>
            <!-- 次级菜单项 -->
            <el-menu-item-group>
                <el-menu-item index="4-1" @click="KeCheng">课程列表</el-menu-item>
                <el-menu-item index="4-2" @click="ChuangJian">创建课程</el-menu-item>
            </el-menu-item-group>
        </el-sub-menu>

        </el-menu>
      </el-aside>
      <el-container>
        <el-header>
                <el-dropdown>
              
                <el-icon><Search /></el-icon>
                <el-icon><Share /></el-icon>
                username<el-icon><arrow-down /></el-icon>
              
              <template #dropdown>
                <el-dropdown-menu>
                  <el-dropdown-item>logout</el-dropdown-item>
                  
                </el-dropdown-menu>
              </template>
            </el-dropdown>
        </el-header>

        <el-main>
              <!-- <el-card>
                <template #header>
                  <div class="card-header">
                    <span>标题</span>
                  </div>
                </template>
                <div style="height:200px;text-align:center;">主体内容</div>
              </el-card> -->
              <router-view></router-view>

        </el-main>

        <el-footer>
            Bulid Version: 20210929bd
            </el-footer>
            
      </el-container>
    </el-container>
   
   
  
  </div>


</template>

<script>
import { Menu,Aim,Trophy,Collection,Odometer,Search,Share,ArrowDown } from '@element-plus/icons-vue'

export default {
components:{
        Menu,
        Aim,
        Trophy,
        Collection,
        Odometer,
        Search,
        Share,
        ArrowDown
    },
    methods:{
      yibiaopan(){
        this.$router.push('/yibiaopan')
      },
      Tcguanli(){
        this.$router.push('/teacher')
      },
      STguanli(){
        this.$router.push('/student')
      },
      GGguanli(){
        this.$router.push('/gonggao')
      },
      XTpeizhi(){
        this.$router.push('/peizhi')
      },
      PTfuwu(){
        this.$router.push('/fuwuqi')
      },
      WTliebiao(){
        this.$router.push('/wenti')
      },
      Addwenti(){
        this.$router.push('/addtimu')
      },
      DaoRuchu(){
        this.$router.push('/daorudaochu')
      },
      BSliebiao(){
        this.$router.push('/bisailiebiao')
      },
      CJbisai(){
        this.$router.push('/chuangjianbisai')
      },
      KeCheng(){
        this.$router.push('/kechengliebiao')
      },
      ChuangJian(){
        this.$router.push('/chuangjiankecheng')
      }
    }
} 
</script>

// <!-- Add "scoped" attribute to limit CSS to this component only -->
<style>

.el-footer{
    background-color: #EDECEC;
    color: var(--el-text-color-primary);
    text-align: center;
    line-height: 20px;
}
.el-header{
  background-color:#F9FAFC;
  top: 0;
}
   
.el-aside{
    background-color: white;
    text-align: center;
    line-height: 200px;
}
.el-main{
    background-color: #EDECEC;
    text-align: left;
}
.img{
  position: relative;
  text-align: center;
}
.el-dropdown{
  top: 75px;
    right: 20px;
    position: absolute;
}

</style>